<template>
  <div class="hot-school">
    <div class="content">
      <div class="header">
        <img class="icon" :src="hotSchoolPink" alt="" />
        <div class="title">热门院校</div>
      </div>

      <div class="list">
        <div
          class="list-item"
          v-for="(item, index) in props.schoolList"
          :key="index"
          @click="gotoSchoolDetail(item)"
        >
          <div class="left">
            <img class="icon" :src="item.schoolLogo" alt="" />
          </div>
          <div class="right">
            <div class="top">{{ item.schoolName }}</div>
            <div class="bottom">
              <div
                class="bottom-item"
                v-for="(_item, _index) in item.dualClassName
                  .split(',')
                  .slice(0, 3)"
                :key="_index"
              >
                {{ _item }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import hotSchoolPink from '@/assets/images/hotSchoolPink.png';
import { ref, onMounted } from 'vue';

import { useRouter } from 'vue-router'; // 导入路由
const router = useRouter();

const props = defineProps({
  schoolList: {
    type: Array,
    default: () => [],
  },
});
const gotoSchoolDetail = (item) => {
  router.push({
    name: 'SchoolDetail',
    query: {
      dataId: item.collegeId,
      dataName: item.schoolName,
    },
  });
};

onMounted(() => {});
</script>

<style lang="scss" scoped>
.hot-school {
  width: 557px;
  border-radius: 42px;
  border: 2px solid transparent;
  // 修改第一层背景为纯色背景
  background-image: linear-gradient(#f7fafa, #f7fafa),
    linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(206, 231, 245, 1));
  background-origin: border-box;
  background-clip: padding-box, border-box;
  backdrop-filter: blur(24px);
  position: relative;
  overflow: hidden;
  .content {
    position: absolute;
    width: 551px;
    background: linear-gradient(180deg, #fff3f9 0%, #f7fafa 50%);
    border-radius: 42px;
    top: 0;
    left: 2px;
    padding: 33px 28px;
    box-sizing: border-box;
    .icon {
      width: 38px;
      height: 39px;
    }
    .title {
      font-family: PingFang-SC, PingFang-SC;
      font-weight: bold;
      font-size: 30px;
      color: #e848bb;
    }
    .header {
      display: flex;
      gap: 18px;
    }
    .list {
      padding-top: 42px;
      display: flex;
      flex-direction: column;
      height: calc(100vh - 594px);
      overflow-y: auto;
      .list-item {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-bottom: 40px;
        .left {
          .icon {
            width: 64px;
            height: 64px;
            border-radius: 50%;
          }
        }
        .right {
          display: flex;
          flex-direction: column;
          .top {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 24px;
            color: #333333;
            margin-bottom: 6px;
          }
          .bottom {
            display: flex;
            gap: 8px;
            .bottom-item {
              padding: 3px 10px;
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 18px;
              color: #666666;
              background: #f0f0f0;
              border-radius: 6px;
            }
          }
        }
      }
    }
  }
}
</style>
